import React, { useState, useRef } from 'react';
import { Form, Input, Button, Typography, Spin, message, Card, Row, Col, Select } from 'antd';
import { CopyOutlined, DownloadOutlined } from '@ant-design/icons';
import CommonTour, { TourGuideButton } from '@/components/CommonTour';

const { Title } = Typography;
const { TextArea } = Input;

export default function ProductPromotionScript() {
  const [form] = Form.useForm();
  const [isGenerating, setIsGenerating] = useState<boolean>(false);
  const [generatedContent, setGeneratedContent] = useState<string>('');
  const [tourVisible, setTourVisible] = useState(false);

  // 使用HTML元素的ref引用方式
  const productNameRef = useRef<HTMLDivElement>(null);
  const productTypeRef = useRef<HTMLDivElement>(null);
  const targetAudienceRef = useRef<HTMLDivElement>(null);
  const priceRef = useRef<HTMLDivElement>(null);
  const styleRef = useRef<HTMLDivElement>(null);
  const languageToneRef = useRef<HTMLDivElement>(null);
  const mainFeaturesRef = useRef<HTMLDivElement>(null);
  const generateButtonRef = useRef<HTMLDivElement>(null);
  const resultRef = useRef<HTMLDivElement>(null);

  const showTour = () => {
    // 延迟显示，确保DOM已经渲染
    setTimeout(() => {
      setTourVisible(true);
    }, 100);
  };

  // 定义steps配置
  const tourSteps = [
    {
      key: 'productName',
      title: '输入产品名称',
      description: '请输入您要推广的产品名称，这将用于生成个性化的带货口播稿',
    },
    {
      key: 'productType',
      title: '选择产品类型',
      description: '选择产品所属的类别，如手机/数码产品、服装/鞋包等',
    },
    {
      key: 'targetAudience',
      title: '选择目标受众',
      description: '选择产品的主要销售对象，如学生群体、职场人士等',
    },
    {
      key: 'price',
      title: '输入参考价格（可选）',
      description: '输入产品的参考价格，有助于生成更精准的促销内容',
    },
    {
      key: 'style',
      title: '选择口播风格',
      description: '选择您希望的口播风格，如直播带货、短视频口播、电视购物等',
    },
    {
      key: 'languageTone',
      title: '选择语言语气',
      description: '选择口播的语言语气，如热情活力、亲切自然、专业讲解等',
    },
    {
      key: 'mainFeatures',
      title: '填写产品主要特点（可选）',
      description: '输入产品的主要特点，每行一个，使口播稿更加具体详实',
    },
    {
      key: 'generateButton',
      title: '生成带货口播稿',
      description: '完成所有设置后，点击此按钮生成专业的带货口播文案',
    },
    {
      key: 'result',
      title: '查看生成结果',
      description: '生成成功后，您可以在此处查看、复制或下载生成的口播稿',
    },
  ];

  // 组织ref引用
  const tourRefs = {
    productName: productNameRef,
    productType: productTypeRef,
    targetAudience: targetAudienceRef,
    price: priceRef,
    style: styleRef,
    languageTone: languageToneRef,
    mainFeatures: mainFeaturesRef,
    generateButton: generateButtonRef,
    result: resultRef,
  };

  // 生成带货口播稿的模拟函数
  const generateContent = (
    productName: string,
    productType: string,
    mainFeatures: string,
    targetAudience: string,
    price: string,
    promotion: string,
    style: string,
    languageTone: string
  ): string => {
    // 这里是模拟生成内容的逻辑，实际应用中应该调用AI模型
    let result = '';

    // 开场问候
    result += `【开场问候】\n`;
    if (style === '直播带货') {
      result += `${languageTone === '热情活力' ? '家人们！姐妹们！' : '亲爱的观众朋友们！'}大家晚上好/下午好呀！欢迎来到我的直播间~ 今天我要给大家推荐一款超级好用的产品，相信你们一定会喜欢的！\n\n`;
    } else if (style === '短视频口播') {
      result += `${languageTone === '幽默搞笑' ? '哎哎哎！先别划走！' : '哈喽，各位小伙伴们！'}今天必须给你们安利一款我最近发现的宝藏好物，简直太适合${targetAudience}了！\n\n`;
    } else if (style === '电视购物') {
      result += `观众朋友们！今天我们为您带来了一款${productType}中的佼佼者——${productName}！它不仅${Math.random() > 0.5 ? '品质卓越' : '功能强大'}，而且价格超级实惠！\n\n`;
    }

    // 产品介绍
    result += `【产品介绍】\n`;
    result += `${languageTone === '专业讲解' ? '首先，让我们来了解一下这款产品。' : languageTone === '亲切自然' ? '我先给大家简单介绍一下这个产品。' : '这款产品到底有多好呢？听我慢慢给你们说。'} ${productName}是一款${productType}，它的主要特点包括：\n`;

    if (mainFeatures) {
      const features = mainFeatures.split('\n').filter(f => f.trim());
      features.forEach((feature, index) => {
        result += `${index + 1}. ${feature}\n`;
      });
    } else {
      // 根据产品类型自动生成特点
      if (productType.includes('手机') || productType.includes('数码')) {
        result += `1. ${Math.random() > 0.5 ? '搭载了最新的处理器' : '拥有超高的屏幕分辨率'}\n`;
        result += `2. ${Math.random() > 0.5 ? '超长续航时间' : '强大的拍照功能'}\n`;
        result += `3. ${Math.random() > 0.5 ? '轻薄便携的设计' : '丰富的扩展功能'}\n`;
      } else if (productType.includes('服装') || productType.includes('鞋包')) {
        result += `1. ${Math.random() > 0.5 ? '采用优质面料' : '时尚百搭的设计'}\n`;
        result += `2. ${Math.random() > 0.5 ? '舒适透气' : '耐穿耐磨'}\n`;
        result += `3. ${Math.random() > 0.5 ? '多色可选' : '适合多种场合'}\n`;
      } else if (productType.includes('美妆') || productType.includes('护肤')) {
        result += `1. ${Math.random() > 0.5 ? '温和不刺激' : '天然成分'}\n`;
        result += `2. ${Math.random() > 0.5 ? '效果显著' : '持久保湿'}\n`;
        result += `3. ${Math.random() > 0.5 ? '适合各种肤质' : '性价比高'}\n`;
      } else {
        result += `1. ${Math.random() > 0.5 ? '高品质材料制作' : '人性化设计'}\n`;
        result += `2. ${Math.random() > 0.5 ? '功能实用' : '易于操作'}\n`;
        result += `3. ${Math.random() > 0.5 ? '耐用性强' : '安全可靠'}\n`;
      }
    }

    // 使用场景
    result += `\n【使用场景】\n`;
    if (targetAudience.includes('学生')) {
      result += `对于学生党来说，${productName}绝对是必备品！无论是${productType.includes('数码') ? '学习、追剧还是社交' : '日常穿搭、上课还是社团活动'}，它都能满足你的需求，而且价格也很适合学生预算。\n`;
    } else if (targetAudience.includes('职场')) {
      result += `作为职场人士，一款好的${productType}能让你的工作更加高效。${productName}${Math.random() > 0.5 ? '性能稳定' : '设计专业'}，非常适合商务场合使用。\n`;
    } else if (targetAudience.includes('家庭')) {
      result += `对于家庭用户来说，${productName}是${productType}中的理想选择。它${Math.random() > 0.5 ? '安全可靠' : '功能全面'}，能满足全家人的需求，是家庭生活的好帮手。\n`;
    } else if (targetAudience.includes('时尚')) {
      result += `如果你是时尚达人，那么${productName}一定不能错过！它${Math.random() > 0.5 ? '设计前卫' : '潮流感十足'}，能让你的穿搭/生活更加出彩。\n`;
    }

    // 使用体验分享
    result += `\n【使用体验】\n`;
    if (style === '直播带货') {
      result += `${languageTone === '热情活力' ? '家人们，我跟你们说，我自己已经用了一段时间了，真的超级好用！' : '说实话，我自己也在用这款产品，体验感非常好。'} 它${Math.random() > 0.5 ? '操作简单' : '效果明显'}，用了之后${Math.random() > 0.5 ? '工作效率提高了不少' : '生活品质都提升了'}。我身边的朋友用了也都说好！\n`;
    } else if (style === '短视频口播') {
      result += `我跟你们讲，我刚开始用的时候就被惊艳到了！${productName}和我之前用过的${productType}完全不一样，它${Math.random() > 0.5 ? '细节处理得特别好' : '有很多贴心的小设计'}，真的能感受到品牌的用心。\n`;
    } else if (style === '电视购物') {
      result += `根据我们的测试和用户反馈，${productName}的满意度高达${Math.floor(Math.random() * 10) + 90}%！用户普遍反映它${Math.random() > 0.5 ? '质量可靠' : '物超所值'}，是一款值得信赖的产品。\n`;
    }

    // 价格与促销
    result += `\n【价格与促销】\n`;
    const originalPrice = price ? `原价${price}` : `原价${Math.floor(Math.random() * 900) + 100}元`;
    const discountedPrice = price ? `现在只要${parseInt(price) * 0.7}元` : `现在只要${Math.floor(parseInt(originalPrice.replace(/[^0-9]/g, '')) * 0.7)}元`;

    if (style === '直播带货') {
      result += `${languageTone === '热情活力' ? '接下来是最激动人心的价格环节！' : '现在我要告诉大家一个好消息！'} ${productName}在市面上的${originalPrice}，但是今天在我的直播间，${discountedPrice}！\n`;
      result += `${languageTone === '幽默搞笑' ? '我的天呐，这个价格真的太香了！' : '这个价格真的是史无前例的优惠！'} 而且今天下单的宝宝们，还能获得${promotion || Math.random() > 0.5 ? '价值XX元的赠品' : '买一送一的优惠'}！\n`;
    } else if (style === '短视频口播') {
      result += `重点来了！这款${productName}平时卖${originalPrice}，但是通过我视频下方的链接购买，${discountedPrice}！\n`;
      result += `不仅如此，前${Math.floor(Math.random() * 100) + 100}名下单的小伙伴还能获得${promotion || Math.random() > 0.5 ? '专属小礼品' : '额外的优惠券'}！\n`;
    } else if (style === '电视购物') {
      result += `现在拨打我们的订购热线，${productName}不仅享受${discountedPrice}的特惠价格，还能获得${promotion || Math.random() > 0.5 ? '免费送货上门' : '延长保修期'}的服务！\n`;
      result += `数量有限，先到先得，机不可失，时不再来！\n`;
    }

    // 催促下单
    result += `\n【催促下单】\n`;
    if (style === '直播带货') {
      result += `${languageTone === '热情活力' ? '家人们，现在点击下方的小黄车，赶紧下单吧！' : '现在就点击屏幕下方的链接，立即购买吧！'} 库存不多了，手慢无！\n`;
      result += `${languageTone === '亲切自然' ? '相信我，这个产品真的值得拥有，买回去绝对不会后悔的！' : '别犹豫了，这么好的产品，这么优惠的价格，错过了可就没有了！'}\n`;
    } else if (style === '短视频口播') {
      result += `链接我已经放在视频下方了，${languageTone === '幽默搞笑' ? '手速快的宝宝们已经开始下单了！' : '感兴趣的小伙伴们赶紧去看看吧！'} 真的是错过拍大腿的好机会！\n`;
    } else if (style === '电视购物') {
      result += `现在就拿起电话，拨打我们的订购热线：400-XXX-XXXX，抢购这款${productName}吧！\n`;
      result += `${languageTone === '专业讲解' ? '机会只有一次，不要让自己留下遗憾！' : '心动不如行动，立即订购吧！'}\n`;
    }

    // 结尾
    result += `\n【结尾】\n`;
    if (style === '直播带货') {
      result += `${languageTone === '热情活力' ? '感谢大家的支持和关注，我们下次直播再见！' : '谢谢大家的观看，如果有任何问题，欢迎在评论区留言哦！'} 记得关注我的直播间，更多好物推荐等你来！\n`;
    } else if (style === '短视频口播') {
      result += `${languageTone === '亲切自然' ? '好了，今天的分享就到这里了，希望对你们有所帮助。' : '喜欢我的视频的话，记得点赞、收藏、转发哦！'} 我们下期再见！\n`;
    } else if (style === '电视购物') {
      result += `再次感谢您的观看，祝您购物愉快，生活美满！\n`;
    }

    return result;
  };

  // 处理表单提交
  const handleSubmit = async (values: any) => {
    try {
      setIsGenerating(true);
      const { productName, productType, mainFeatures, targetAudience, price, promotion, style, languageTone } = values;

      // 模拟API请求延迟
      await new Promise(resolve => setTimeout(resolve, 1500));

      const generated = generateContent(productName, productType, mainFeatures, targetAudience, price, promotion, style, languageTone);
      setGeneratedContent(generated);
      message.success('带货口播稿生成成功！');
    } catch (error) {
      message.error('生成失败，请稍后重试');
    } finally {
      setIsGenerating(false);
    }
  };

  // 复制生成的内容
  const handleCopy = () => {
    navigator.clipboard.writeText(generatedContent).then(() => {
      message.success('内容已复制到剪贴板');
    }).catch(() => {
      message.error('复制失败');
    });
  };

  // 下载生成的内容
  const handleDownload = () => {
    const blob = new Blob([generatedContent], { type: 'text/plain;charset=utf-8' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '带货口播稿.txt';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(link.href);
    message.success('文件下载成功');
  };

  // 产品类型选项
  const productTypeOptions = [
    { label: '手机/数码产品', value: '手机/数码产品' },
    { label: '服装/鞋包', value: '服装/鞋包' },
    { label: '美妆/护肤产品', value: '美妆/护肤产品' },
    { label: '家居用品', value: '家居用品' },
    { label: '食品饮料', value: '食品饮料' },
    { label: '母婴用品', value: '母婴用品' },
    { label: '图书文具', value: '图书文具' },
    { label: '运动户外', value: '运动户外' },
    { label: '其他', value: '其他' },
  ];

  // 目标受众选项
  const targetAudienceOptions = [
    { label: '学生群体', value: '学生群体' },
    { label: '职场人士', value: '职场人士' },
    { label: '家庭用户', value: '家庭用户' },
    { label: '时尚达人', value: '时尚达人' },
    { label: '中老年群体', value: '中老年群体' },
    { label: '通用人群', value: '通用人群' },
  ];

  // 口播风格选项
  const styleOptions = [
    { label: '直播带货', value: '直播带货' },
    { label: '短视频口播', value: '短视频口播' },
    { label: '电视购物', value: '电视购物' },
  ];

  // 语言语气选项
  const languageToneOptions = [
    { label: '热情活力', value: '热情活力' },
    { label: '亲切自然', value: '亲切自然' },
    { label: '专业讲解', value: '专业讲解' },
    { label: '幽默搞笑', value: '幽默搞笑' },
  ];

  return (
    <>
      <div style={{ padding: '24px' }}>
        <Title level={2} style={{ display: 'flex', alignItems: 'center' }}>
          带货口播稿生成
          <TourGuideButton onClick={showTour} />
        </Title>
        <Card style={{ marginBottom: '24px' }}>
          <Form
            form={form}
            layout="vertical"
            onFinish={handleSubmit}
            initialValues={{
              productType: '手机/数码产品',
              targetAudience: '学生群体',
              style: '直播带货',
              languageTone: '热情活力',
            }}
          >
            <Row gutter={[16, 16]}>
              <Col xs={24} md={12}>
                <Form.Item
                  name="productName"
                  label="产品名称"
                  rules={[{ required: true, message: '请输入产品名称' }]}
                >
                  <div ref={productNameRef}>
                    <Input placeholder="请输入产品名称" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="productType"
                  label="产品类型"
                  rules={[{ required: true, message: '请选择产品类型' }]}
                >
                  <div ref={productTypeRef}>
                    <Select placeholder="请选择产品类型" options={productTypeOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="targetAudience"
                  label="目标受众"
                  rules={[{ required: true, message: '请选择目标受众' }]}
                >
                  <div ref={targetAudienceRef}>
                    <Select placeholder="请选择目标受众" options={targetAudienceOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="price"
                  label="参考价格（可选）"
                >
                  <div ref={priceRef}>
                    <Input placeholder="请输入产品参考价格，如：999元" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="style"
                  label="口播风格"
                  rules={[{ required: true, message: '请选择口播风格' }]}
                >
                  <div ref={styleRef}>
                    <Select placeholder="请选择口播风格" options={styleOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="languageTone"
                  label="语言语气"
                  rules={[{ required: true, message: '请选择语言语气' }]}
                >
                  <div ref={languageToneRef}>
                    <Select placeholder="请选择语言语气" options={languageToneOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item
                  name="mainFeatures"
                  label="产品主要特点（可选）"
                >
                  <div ref={mainFeaturesRef}>
                    <TextArea rows={3} placeholder="请输入产品的主要特点，每行一个，如不填写将自动生成" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item
                  name="promotion"
                  label="促销信息（可选）"
                >
                  <TextArea rows={2} placeholder="请输入促销信息，如：买一送一、赠送礼品等，如不填写将自动生成" />
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item>
                  <div ref={generateButtonRef}>
                    <Button type="primary" htmlType="submit" loading={isGenerating} style={{ width: '100%' }}>
                      {isGenerating ? <Spin /> : '生成带货口播稿'}
                    </Button>
                  </div>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Card>

        {generatedContent && (
          <Card title="生成结果" extra={
            <div style={{ display: 'flex', gap: '8px' }}>
              <Button icon={<CopyOutlined />} onClick={handleCopy}>复制</Button>
              <Button icon={<DownloadOutlined />} onClick={handleDownload}>下载</Button>
            </div>
          }>
            <div ref={resultRef} style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: 1.6 }}>
              {generatedContent}
            </div>
          </Card>
        )}
      </div>

      <CommonTour
        open={tourVisible}
        steps={tourSteps}
        targetRefs={tourRefs}
        onClose={() => setTourVisible(false)}
      />
    </>
  );
}